<template>
  <div class="login-container">
    <!-- 背景动画 -->
    <div class="background-animation">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>

    <div class="login-content">
      <el-card class="login-card" shadow="always">
        <template #header>
          <div class="card-header">
            <div class="logo-container">
              <img src="@/assets/logo.svg" alt="Logo" class="logo" />
              <div class="logo-glow"></div>
            </div>
            <h2 class="title">工厂计时系统</h2>
            <p class="subtitle">高效 · 精准 · 智能</p>
          </div>
        </template>

        <el-form ref="loginForm" size="large" class="login-form">
          <el-form-item>
            <el-input
              v-model="workerId"
              placeholder="请输入工号"
              clearable
              autofocus
              @keyup.enter="handleLogin"
            >
              <template #prefix>
                <el-icon class="input-icon"><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="password"
              type="password"
              placeholder="请输入密码"
              show-password
              @keyup.enter="handleLogin"
            >
              <template #prefix>
                <el-icon class="input-icon"><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="login-button" :loading="loading" @click="handleLogin">
              <span v-if="!loading">登 录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>

          <div class="divider">
            <span class="divider-text">或</span>
          </div>

          <el-form-item>
            <el-button type="success" class="register-button" @click="showRegisterDialog">
              <el-icon><Plus /></el-icon>
              注册新账号
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 注册弹窗 -->
    <el-dialog
      v-model="registerDialogVisible"
      title="用户注册"
      width="500px"
      center
      class="register-dialog"
    >
      <el-form ref="registerForm" label-width="100px" size="large">
        <el-form-item label="工号" required>
          <el-input v-model="registerEmployeeId" placeholder="请输入工号 (字母数字)" clearable>
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="密码" required>
          <el-input
            v-model="registerPassword"
            type="password"
            placeholder="请输入密码 (至少6字符)"
            show-password
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="姓名" required>
          <el-input v-model="registerRealName" placeholder="请输入真实姓名" clearable>
            <template #prefix>
              <el-icon><Edit /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="手机" required>
          <el-input v-model="registerContact" placeholder="请输入手机号码" clearable>
            <template #prefix>
              <el-icon><Phone /></el-icon>
            </template>
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="registerDialogVisible = false" size="large">取消</el-button>
        <el-button type="primary" @click="handleRegister" size="large" :loading="registerLoading">
          注册
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, Edit, Phone, Plus } from '@element-plus/icons-vue'
import axios from 'axios'

const router = useRouter()

// 切换登录表单到ref，匹配文档基础用法示例
const workerId = ref('')
const password = ref('')

// 切换注册表单到ref
const registerEmployeeId = ref('')
const registerPassword = ref('')
const registerRealName = ref('')
const registerContact = ref('')

const registerDialogVisible = ref(false)
const loading = ref(false)
const registerLoading = ref(false)

const showRegisterDialog = () => {
  registerDialogVisible.value = true
}

const handleLogin = async () => {
  if (!workerId.value || !password.value) {
    ElMessage.error('请输入工号和密码')
    return
  }

  loading.value = true
  try {
    const response = await axios.post('/api/auth/login', {
      employeeId: workerId.value,
      password: password.value,
    })
    localStorage.setItem('token', response.data.accessToken)
    localStorage.setItem('user', JSON.stringify(response.data.user))
    ElMessage.success('登录成功')
    router.push('/home')
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '登录失败')
  } finally {
    loading.value = false
  }
}

const handleRegister = async () => {
  if (
    !registerEmployeeId.value ||
    !registerPassword.value ||
    !registerRealName.value ||
    !registerContact.value
  ) {
    ElMessage.error('请填写所有字段')
    return
  }

  registerLoading.value = true
  try {
    const response = await axios.post('/api/auth/register', {
      employeeId: registerEmployeeId.value,
      password: registerPassword.value,
      realName: registerRealName.value,
      contact: registerContact.value,
    })
    localStorage.setItem('token', response.data.accessToken)
    localStorage.setItem('user', JSON.stringify(response.data.user))
    ElMessage.success('注册成功，已自动登录')
    registerDialogVisible.value = false
    router.push('/home')
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '注册失败')
  } finally {
    registerLoading.value = false
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
  animation-delay: 0s;
}

.shape-2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  right: -100px;
  animation-delay: 2s;
}

.shape-3 {
  width: 150px;
  height: 150px;
  top: 50%;
  left: 10%;
  animation-delay: 4s;
}

.shape-4 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  right: 20%;
  animation-delay: 6s;
}

.login-content {
  position: relative;
  z-index: 2;
  width: 450px;
}

.login-card {
  border: none;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.login-card :deep(.el-card__header) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 40px 40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.card-header {
  text-align: center;
}

.logo-container {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
}

.logo {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  filter: blur(20px);
  animation: pulse 2s ease-in-out infinite alternate;
}

.title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
}

.subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 300;
}

.login-form {
  padding: 30px 40px;
}

.login-form :deep(.el-form-item) {
  margin-bottom: 24px;
}

.login-form :deep(.el-input) {
  --el-input-bg-color: rgba(255, 255, 255, 0.9);
  --el-input-border-color: rgba(102, 126, 234, 0.2);
  --el-input-hover-border-color: #667eea;
  --el-input-focus-border-color: #667eea;
}

.login-form :deep(.el-input__wrapper) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
  padding: 12px 16px;
}

.login-form :deep(.el-input__prefix) {
  margin-right: 8px;
}

.input-icon {
  color: #667eea;
  font-size: 18px;
}

.login-button {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
}

.divider:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(102, 126, 234, 0.2);
}

.divider-text {
  background: rgba(255, 255, 255, 0.95);
  padding: 0 12px;
  color: #667eea;
  font-size: 12px;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

.register-button {
  width: 100%;
  height: 45px;
  border-radius: 12px;
  font-weight: 500;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: #667eea;
  transition: all 0.3s ease;
}

.register-button:hover {
  background: rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
}

.register-dialog :deep(.el-dialog) {
  border-radius: 20px;
  overflow: hidden;
}

.register-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin: 0;
  padding: 20px;
}

.register-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
}

.register-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.register-dialog :deep(.el-dialog__footer) {
  padding: 20px 30px;
  border-top: 1px solid rgba(102, 126, 234, 0.1);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* PC端优化 */
.login-card :deep(.el-card__header) {
  padding: 40px 40px 20px;
}

.login-form {
  padding: 30px 40px;
}

.title {
  font-size: 28px;
}

.logo {
  width: 60px;
  height: 60px;
}

.subtitle {
  font-size: 14px;
}
</style>